<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .aa{
            color: #885F40;
            padding: 0 15px;
            font-size: 14px;
        }
        
        .bb{
            color: #ED6D38;
            font-size: 12px;
            text-decoration: none;
        }
        .bb:hover{
            text-decoration: underline;

        }

        /*---------------------------头部结束------------------------------------------*/
        .map{
            width: 100%;
            height: 100%;
            background: radial-gradient(#FFAB00,#FFAB00);
            background-repeat: no-repeat;
        }
        .mg{
            width: 1200px;
            height: 760px;
            margin-left: 150px;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="#app">
  <!-----------------------------头部开始-------------------------------------------->
    <el-header>
<div style="z-index: 0;position: fixed">
    <div style="width: 1100px;height: 80px;margin:0 auto;padding-top: 23px;">

        <img style="vertical-align: middle;width: 134px;height: 34px;" src="images/redbage/logo.png">
        <el-menu style="padding: 20px">
            <el-menu-item class="aa">首页</el-menu-item>
            <el-menu-item class="aa">蛋糕</el-menu-item>
            <el-menu-item class="aa">面包</el-menu-item>
            <el-menu-item class="aa">套餐</el-menu-item>
            <el-menu-item class="aa">鲜花</el-menu-item>
            <el-menu-item class="aa">甜品下午茶</el-menu-item>
            <el-menu-item class="aa">周边</el-menu-item>
            <el-menu-item class="aa">企业专区</el-menu-item>
            <el-menu-item class="aa">品牌故事</el-menu-item>
        </el-menu>
        <img style="width: 16px; height: 20px;" src="images/redbage/location_icon.png">
        <el-button type="text" slot="append">
            <span  style="color:#ED6D38;font-size: 14px">深圳</span>
        </el-button>
        <img style="width: 9px; height: 5px;" src="images/redbage/location_after.png" style="vertical-align: middle">

        <div style="float: right">
            <img style="width: 18px;height: 20px;" src="images/redbage/personal_icon.png">
            <a class="bb" href="">[会员中心]</a>
            <a class="bb" href="">[登录]</a>
            <a class="bb" href="">[注册]</a>
            <img style="width: 20px;height: 20px;" src="images/redbage/cart_icon.png">
            <div style="width: 195px;"></div>
        </div>

    </div>
<!---------------------------------------------------背景视频开始-------------------------------------------------------------------------------------------------->
            <video style="width: 100%; height: 100%;margin: 0;padding: 0;box-sizing: border-box;object-fit: contain;pointer-events: none" controls="controls" autoplay="autoplay" muted="muted" loop="loop">
                <source src="images/1date1cake.mp4" type="video/mp4">
            </video>
</div>
<!---------------------------------------------------背景视频结束-------------------------------------------------------------------------------------------------->
</el-header>
   <!----------------------------头部结束-------------------------------------------->

<!--    <div style="width: 1200px;height: 2000px;background-color: #ED6D38;position: absolute;box-sizing: border-box">-->
        <div style="background-color: white;height: 6240px;width: 1150px;position: relative;z-index: 1;top: 650px;margin: 0 auto;padding: 23px 26px">
            <img src="images/story/middle01.jpg">
            <div style="width: 1150px;height: 115px;text-align: center;font-size: 30px;line-height: 150px;font-weight:  500;"><p>尊崇生日文化，放大温暖</p></div>
            <div style="margin-top: 30px"><hr></div>
            <div style="width: 1150px;margin-top: 30px">
                <div style="line-height: 65px;font-size: 14px;float: left;padding-left: 100px;padding-top: 100px;">
                    <p><span style="font-weight: 600;font-size: 24px;line-height: 120px">壹点壹客，祝您生日快乐！</span><br>

                        我们不仅有生日不可或缺的生日蛋糕<br>

                        更对生日文化进行层层解读<br>

                        发掘生日文化、品味生日文化<br>

                        建立周到的生日服务体系<br>

                        为每一个生日带来暖心的服务体验</p>
                </div>
                <img style="width: 700px;height: 485px;margin-top: 40px;padding-left: 100px" src="images/story/middle001.jpg">
            </div>
            <div style=" width: 300px;line-height: 65px;font-size: 14px;margin-right: 10px;float: right;padding-top: 100px;">
                <p><span style="font-weight: 600;font-size: 24px;line-height: 120px">打造有仪式感的生日派对</span><br>

                    当生日钟声敲响的那一刻<br>

                    当一根根璀璨的蜡烛燃起时<br>

                    壹点壹客生日派对给您更多生日的惊喜<br>

                    加冕时刻、欢乐时光、魔术表演<br>

                    每一个环节都给生日难忘的记忆</p>
            </div>
            <img style="width: 700px;height: 485px;margin-top: 40px;padding-left: 23px" src="images/story/middle02.jpg">
            <div style="width: 1150px;height: 115px;text-align: center;font-size: 30px;line-height: 250px;font-weight:  500;"><p>精选优质原料，匠心缔造美味</p></div>
            <div style="padding-top: 80px;"><hr></div>

        <div style="width: 1150px;margin-top: 30px;">
            <div style="line-height: 65px;font-size: 14px;float: left;padding-left: 100px;padding-top: 100px;">
                <p><span style="font-weight: 600;font-size: 24px;line-height: 120px">进口优质原料</span><br>

                    我们拒绝添加剂<br>

                    选用世界优质原料<br>

                    国际西点赛事选材标准的自我意志<br>

                    对自己挑剔才能对消费者负责</p>
            </div>
            <img style="width: 780px;height: 485px;margin-top: 40px;padding-left: 150px" src="images/story/middle03.jpg">
        </div>
            <div style=" width: 300px;line-height: 65px;font-size: 14px;margin-right: 10px;float: right;padding-top: 30px;">
                <p><span style="font-weight: 600;font-size: 24px;line-height: 80px">严格筛选，拒绝“差不多”</span><br>

                    从一颗草莓的摘取，到一颗芒果的拣拾<br>

                    我们只挑新鲜的<br>

                    色泽光鲜，拒绝暗淡无光<br>

                    果肉饱满，拒绝皮厚肉少<br>

                    奶油天然，拒绝人工化学<br>

                    巧克力香浓，拒绝有害添加<br>

                    如此精心的选材，只为满足严谨的你</p>
            </div>

            <img style="width: 700px;height: 485px;margin-top: 60px;padding-left: 23px" src="images/story/middle04.jpg">
            <div style="width: 1150px;margin-top: 30px;">
                <div style="line-height: 65px;font-size: 14px;float: left;padding-left: 100px;padding-top: 30px;">
                    <p><span style="font-weight: 600;font-size: 24px;line-height: 120px">顺应自然，适时所取</span><br>

                        四季各有千秋，食材各有风情<br>

                        在对的时令遇到对的食材是一种固执<br>

                        我们掌握和大自然交流的通关密码<br>

                        重新衡量新鲜的尺度<br>

                        我们从不违背大自然的时间<br>

                        只在合适的时间，选用更新鲜的食材</p>
                </div>
                <img style="width: 780px;height: 485px;margin-top: 40px;padding-left: 150px" src="images/story/middle05.jpg">
            </div>

            <div style="width: 1150px;height: 135px;text-align: center;font-size: 30px;line-height: 220px;font-weight:  500;overflow: hidden;"><p>名师匠心手作，欧洲正统传承</p></div>
            <div style="padding-top: 50px;"><hr></div>

            <div style=" width: 300px;line-height: 65px;font-size: 14px;margin-right: 10px;float: right;padding-top: 30px;">
                <p><span style="font-weight: 600;font-size: 24px;line-height: 150px">欧洲时光，经典标杆</span><br>

                    历经八百年考验<br>

                    从圣马格利塔到法国南部<br>

                    欧洲正统蛋糕文化的传承<br>

                    是我们一直坚守的责任<br>

                    味道带着时光的记忆<br>

                    重新树立经典的标杆</p>
            </div>
            <img style="width: 700px;height: 485px;margin-top: 60px;padding-left: 23px" src="images/story/middle06.jpg">

            <div style="width: 1150px;margin-top: 30px;">
                <div style="line-height: 65px;font-size: 14px;float: left;padding-left: 100px;padding-top: 70px;">
                    <p><span style="font-weight: 600;font-size: 24px;line-height: 120px">大师传承，纯正口味</span><br>

                        我们拥有专业的欧洲西点大厨团队<br>

                        专业的欧式蛋糕烘培机制和流程<br>

                        国际西点大师新品研发<br>

                        与世界同步的纯正口味</p>
                </div>
                <img style="width: 780px;height: 485px;margin-top: 40px;padding-left: 150px" src="images/story/middle07.jpg">
            </div>

            <div style="width: 1150px;height: 135px;text-align: center;font-size: 30px;line-height: 220px;font-weight:  500;overflow: hidden;"><p>专业冷链配送，时刻美味保鲜</p></div>
            <div style="padding-top: 50px;"><hr></div>

            <div style=" width: 305px;line-height: 65px;font-size: 14px;margin-right: 10px;float: right;padding-top: 40px;">
                <p><span style="font-weight: 600;font-size: 24px;line-height: 120px">从不让美味在路上打折</span><br>

                    壹点壹客采用提前7小时电话、官网、微信下单式<br>

                    当日生产配送<br>

                    苛刻低温，配送中保温包冷藏处理<br>

                    把握时机力求美味健康<br>

                    争分夺秒，蛋糕从诞生到配送不到3小时<br>

                    卫生、安全、新鲜</p>
            </div>
            <img style="width: 700px;height: 485px;margin-top: 60px;padding-left: 23px" src="images/story/middle08.jpg">

            <div style="width: 1150px;margin-top: 30px;">
                <div style="line-height: 72px;width: 491px;font-size: 14px;float: left;padding-left: 50px;padding-top: 70px;">
                    <p><span style="font-weight: 600;font-size: 24px;line-height: 130px">自建配送团队 引领行业标准</span><br>

                        壹点壹客拥有自己的专业冷链配送团队<br>

                        他们的工作目标是：准点、专业、感动每一位客户<br>

                        壹点壹客冷链配送团队配送范围覆盖深圳90%，即将覆盖全深圳<br>

                        配送时间：早10点—晚9点，全年无休</p>
                </div>
                <img style="width: 600px;height: 485px;margin-top: 40px;right: 23px" src="images/story/middle09.jpg">
            </div>


        </div>
</div>
<div style="width: 100%;height: 300px;background-color: white;position: absolute;z-index: 1000;margin-top: 700px">
    <div style="text-align: center;font-size: 100px;">写页脚</div>

</div>

<!--    </div>-->
<!-----------------------------页脚开始-------------------------------------------->
    <footer>

    </footer>


<!-----------------------------页脚结束-------------------------------------------->
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new vue({
        el:'#app',
        data: function (){
            return{
                arr:[{title:"蛋糕"},
                    {title:"面包"},
                    {title:"套餐"},
                    {title:"鲜花"},
                    {title:"甜品下午茶"},
                    {title:"周边"},
                    {title:"企业专区"},
                    {title:"品牌故事"}]
            }

        },
        methods:{

        }

    })
</script>
</html>